<template>
  <div class="main">
    <!-- 面包屑 -->
    <div class="Breadcrumb"></div>

    <el-table :data="orderData" border style="width: 100%">
      <el-table-column prop="orderDetail" label="产品图片" width="136">
        <template v-slot="scope">
          <el-avatar shape="square" :size="80" fit="scale-down" :src="scope.row.orderDetail[0].imageUrl">
					</el-avatar>
        </template>
      </el-table-column>

      <el-table-column prop="order_id" label="订单编号" width="254">
      </el-table-column>

      <el-table-column prop="orderDetail[0].productName" label="产品名称" width="184">
      </el-table-column>

      <el-table-column prop="orderDetail[0].quantity" label="数量" width="104">
      </el-table-column>

      <el-table-column prop="total_fee" label="总价格" width="104">
      </el-table-column>

      <el-table-column prop="create_time" label="创建时间" width="184">
      </el-table-column>

      <el-table-column prop="" label="支付状态" width="104">
          <template v-slot="{row}">
             {{row.pay_status === 1 ? '已支付' : '未支付' }}
          </template>
      </el-table-column>

      <el-table-column prop="" label="订单状态" width="104">
          <template v-slot="{row}">
            <span v-if="row.order_status === 0">未交易</span>
            <span v-else-if="row.order_status === 1">提交成功</span>
            <span v-else-if="row.order_status === 2">已经取消</span>
            <span v-else-if="row.order_status === 3">无效订单</span>
            <span v-else-if="row.order_status === 4">交易关闭</span>
            <span v-else-if="row.order_status === 5">退货</span>
          </template>
      </el-table-column>

      <el-table-column prop="opration" label="操作" width="504">
        <template v-slot="{ row }">
						<el-button type="primary" v-hasPay="[row.pay_status, row.order_status]"
							icon="iconfont icon-chongzhi"> 去支付 </el-button>
						<el-button type="danger" icon="el-icon-delete"> 删除 </el-button>
					</template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import * as api from "@/api/transaction";
export default {
  meta: {
    title: "order",
    name: "订单管理",
    icon: "iconfont icon-dd",
  },
  data() {
    return {
      orderData: [],
    };
  },
  methods: {
    getOrderList(){
      api.getOrderApi()
      .then(res=>{
        this.orderData=res.data.data
        // console.log(this.orderData);
      })
    }
  },
  created () {
    // 获取订单
    this.getOrderList()
  },
  directives: {
		hasPay: {
			inserted(el, binding) {
				// console.log(binding);
				//指令接收的是用户的支付状态
				//0未支付 显示去支付按钮
				//1已支付 禁用去支付按钮
				//接收到的参数是一个数组 [pay_status,order_status]
				let [pay_status, order_status] = binding.value;
				//先保存当前按钮的类名
				let className = el.className;
				//当pay_status不是0 的时候
				//order_status不是1的时候
				//禁用按钮
				//order_status 0未提交 1已提交  2已经取消 3无效订单 4.交易关闭 5退货
				if (pay_status !== 0 || order_status !== 1) {
					el.disabled = true; //禁用按钮
					el.className = className + " " + "is-disabled";
				}
			},
		},
  }

};
</script>
<style lang="less" scoped>

/deep/ .el-avatar {
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-left:16px ;
	 img {
		width: 80px;
    height: 30px;  

	}}
#app {
  .layout-container {
    .el-container {
      .is-vertical {
        .el-main {
          background-color: #fff;
          .main {
            line-height: 14px;
            font-size: 14px;
            text-align: left;
            .Breadcrumb {
              margin: 20px 0 30px 0;
              .Breadcrumb__item:nth-of-type(1) {
                font-weight: 900;
              }
              .Breadcrumb__item:nth-of-type(1):active {
                color: skyblue;
              }
              .Breadcrumb__item:nth-of-type(2) {
                font-weight: 900;
              }
              .Breadcrumb__item:nth-of-type(1):hover {
                cursor: pointer;
                color: skyblue;
              }
            }
            /deep/ .el-table {
              .el-table__cell {
                text-align: center;

              }
            }
          }
        }
      }
    }
  }
}
</style>